<template>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
      <!-- 文章列表 -->
      <!--
        上拉加载
        1. 准备一个高度固定的滚动容器结构
        2. 组件关键参数
           loading 表示是否正在加载中的一个开关 如果你正在加载数据 自动变为true
           需要我们手动在作完数据拼接之后 设置为false
           finished 表示数据是否全部加载完毕 手动设置为true 彻底结束上拉加载交互
           load 检测到达底部了 自动执行的事件 回调中需要核心逻辑
       -->
      <div class="scrollContainer">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-test="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
        <article-list-item
            v-for="article in list"
            :key="article.art_id"
            :article-data="article"
            @click.native="goDetail(article.art_id)"
          />
        </van-list>
      </div>
    </div>
</template>

<script>
import ArticleListItem from '@/views/Home/components/article-list-item.vue'
import { searchResultListAPI } from '@/api'
export default {
  name: 'SearchResult',
  components: {
    ArticleListItem
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  activated () {
    this.fetchList()
  },
  mounted () {
    this.fetchList()
  },
  methods: {
    async fetchList () {
      const res = await searchResultListAPI({
        q: this.$route.query.keyword,
        page: this.page
      })
      console.log(res)
      this.list = res.data.results
    },
    goDetail () {

    },
    async onLoad () {
      // 1. 请求数据 [page++]
      this.page++
      const res = await searchResultListAPI({
        q: this.$route.query.keyword,
        page: this.page
      })
      // 2. 数据拼接  老数据 + 新数据
      this.list = [...this.list, ...res.data.results]
      // 3. loading设置为false
      this.loading = false
      // 4. 判断当前是否没有数据了 finished设置为true
      if (res.data.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
.scrollContainer{
  position: fixed;
  top:46px;
  bottom: 0;
  width:100%;
  overflow: auto;
}
</style>
